<template>
  <div class="pieChartx-Box">
    <div ref="barChart" :style="{ width: '680px', height: '460px' }"></div>
  </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import api from '@/api'
let num = ref<Array<any>>([])
let arr = ref<Array<any>>([])
const postAllChcsService = async () => {
  const result = await api.Mdatastatistics.postAllChcsServiceApi()
  console.log("服务包", result.data.data.rows);
  result.data.data.rows.forEach((item: any) => {
    if (item.flag === 0) {
      num.value.push(1)
    }
    arr.value.push(item.name)
  })
  initBarEcharts();
}
const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    title: {
      text: '服务包使用情况',
      x: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    color: ["#409EFF"],
    xAxis: {
      type: 'category',
      data: arr.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: num.value,
        type: 'bar',
        barWidth: 10
      }
    ]
  });
}
onMounted(() => {

  postAllChcsService()
});

</script>



<style lang='scss' scoped>
.pieChartx-Box {
  border: 1px solid #eee;
  width: 680px;
  height: 420px;
  border-radius: 6px;

  padding: 20px;
}
</style>